<!--底部栏-->
<template>
	<el-affix :offset="0" position="bottom">
		<el-card :body-style="{ padding: '5px', 'background-color': backgroundColor }" shadow="hover">
			<div style="display: flex; align-items: center; justify-content: space-between">
				<div :style="{ color: color }">{{ extra }}</div>
				<div>
					<slot></slot>
				</div>
			</div>
		</el-card>
	</el-affix>
</template>

<script lang="ts" setup name="zh-footer-toolbar">
defineProps({
	extra: {
		type: [String, Object], //额外信息
		default: '操作栏',
	},
	backgroundColor: {
		type: [String], //背景颜色
		default: `var(--el-color-primary-light-9)`,
	},
	color: {
		type: [String], //额外信息文字颜色
		default: `var(--el-color-primary)`,
	},
});
</script>

<style lang="scss" scoped></style>
